<template>
    <div class="container">
        <div class="packet" @mousedown="mouseDown()" @mouseup="mouseUp()" @mouseleave="mouseUp()">
            <div class="packet_prize">￥500</div>
            <canvas
                class="packet_paint"
                ref="canvas"
                width="200"
                height="80"
                @mousemove="mouseMove"
                @mouseleave="ctx.closePath()"
                @mouseenter="ctx.beginPath()"
            ></canvas>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";

const canvas = ref<HTMLCanvasElement>();
let ctx: CanvasRenderingContext2D;
let isDown = false;

// 初始化
onMounted(() => {
    ctx = canvas.value.getContext("2d");
    // 填充灰色
    ctx.fillStyle = "darkgray";
    ctx.fillRect(0, 0, 200, 80);
    ctx.strokeStyle = "red";
    // 设置合成类型为移除
    ctx.globalCompositeOperation = "destination-out";
    // 设置描边样式
    ctx.lineWidth = 12;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
});
// 鼠标按下
function mouseDown() {
    isDown = true;
    ctx.beginPath();
}
// 鼠标移动
function mouseMove(e: MouseEvent) {
    if (isDown) {
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
    }
}
// 鼠标释放
function mouseUp() {
    isDown = false;
    ctx.closePath();
}
</script>
<style scoped lang="scss" src="./scrape.scss"></style>
